<template>
    <mian-layout>
        <el-descriptions labelClassName="mysdItemLable" title="道具详情" :column="2" border>
            <el-descriptions-item label="道具id">{{oDetail.arPropId}}</el-descriptions-item>
            <el-descriptions-item label="道具名称">{{oDetail.name}}</el-descriptions-item>
            <el-descriptions-item label="道具描述" span="2">{{oDetail.subtitle}}</el-descriptions-item>
            <el-descriptions-item label="道具价值分析" :span="2">{{oDetail.valueAnalysis}}</el-descriptions-item>
            <el-descriptions-item label="关联NFT">{{oDetail.nftName}}</el-descriptions-item>
            <el-descriptions-item label="关联U3D道具">{{oDetail.name}}</el-descriptions-item>
            <!-- <el-descriptions-item label="锻造状态">
                <template v-if="oDetail.nftBorned=='born'">已锻造</template>
                <template v-else-if="oDetail.nftBorned=='no_born'">未锻造</template>
                <template v-else>--</template>
            </el-descriptions-item> -->
            <el-descriptions-item label="月访问量（UV）">{{visits.monthVisit}}</el-descriptions-item>
            <el-descriptions-item label="累计访问量（UV）">{{visits.totalVisit}}</el-descriptions-item>
            <el-descriptions-item label="道具头图" :span="2">
                <div class="imgItemBox">
                    <img :src="oDetail.headerImageUrl">
                </div>
            </el-descriptions-item>
            <el-descriptions-item label="道具AR视频" :span="2" v-if="oDetail.videoUrl">
                <video class="myvideo" style="width:500px;height:200px" ref="videoEle" controls>
                    <source :src="oDetail.videoUrl" type="video/mp4">
                    您的浏览器不支持Video标签。
                </video>
            </el-descriptions-item>
        </el-descriptions>
        <br/>

        <div style="text-align: center;">
            <my-back type="info" :reGetDataFlag="true">返回</my-back>
            <el-button type="success" plain icon="el-icon-edit" @click="goDetail">修改</el-button>
        </div>
    </mian-layout>
</template>
<script>
import {mapGetters} from "vuex"
import myTable from '@/components/public/myTable';
import myBack from '@/components/public/myBack.vue'
import {
    get_prop_detail,
    get_visit_statistics
} from '@/api/collext'
export default {
    components:{
      myTable,
      myBack
    },
    data(){
        return{
            id:'',
            oDetail:{},
            sceneNames:[],
            visits:{}
        }
    },
    computed:{
        ...mapGetters({
            'userInfo':'user/userInfo'
        })
    },
    created(){
        this.id = this.$route.params.id
        this.getData()
        this.getVisit()
        //this.oDetail = JSON.parse(sessionStorage.getItem('propDetails'))
    },
    methods:{
        async getData(){ 
            const res = await get_prop_detail({arPropId:this.id})
            this.oDetail = res.data || {}
        },
        getVisit(){
            get_visit_statistics({
                objectId:this.id,
                operateType:1, // 访问量：1-UV,2-PV，趋势图：11-小时，5-天，2-月
                visitTypeCode:7  // 访问的类型1-地图，2-场景，3-店铺，4-物品，5-城市，6-广告位，7-道具，8-DAO，9-NFT
            }).then(res =>{
                this.visits = res.data
            })
        },
        goDetail(){
            sessionStorage.setItem('propDetails',JSON.stringify(this.oDetail))
            this.$router.push(`/industry/prop/add?id=${this.oDetail.arPropId}`)
        }
    }
}
</script>
<style lang="scss" scoped>
    .imgItemBox{
        display: flex;
        img{
            display: block;
            height: 100px;
            margin: 0 10px 0 0;
        }
    }
    .imgList{
        display: flex;
        padding: 0 0 10px 0;
        img{
            display: block;
            height: 70px;
        }
        p{
            display: flex;
            align-items: center; 
            padding: 0 0 0 20px;
        }
    }
</style>
<style lang="scss">
    .mysdItemLable{
        width: 150px;
    }
</style>